<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position: relative;
        }
        div img {
            position: absolute;
            left: 0;
            top: 0;
        }
        div img:nth-child(1){
            left: 420px;
            top: 60px;
            transform: rotate(300deg);
        }
        div img:nth-child(2){
            left: 660px;
            top: 60px;
            transform: rotate(350deg);
        }
        div img:nth-child(3){
                   left: 700px;
                   top: 160px;
                   transform: rotate(300deg);
               }
        div img:nth-child(4){
            left: 800px;
            top: 100px;
            transform: rotate(300deg);
        }
        div img:nth-child(5){
            left: 420px;
            top: 280px;
            transform: rotate(100deg);
        }


        div img:hover {
            /*z-index: 100;*/
            /*transform: rotate(0)scale(0.1);*/
            /*transition: all 4s ease-in-out 0s;*/
            cursor: pointer;
            animation: donghuatupian 5s 0s 10 ease-in normal running;
        }
        @keyframes donghuatupian {
            0%{height:100px;width:100px;transform: rotate(0deg)}
            25%{height:200px;width:200px;transform: rotate(90deg)}
            50%{height:300px;width:300px;transform: rotate(150deg)}
            750%{height:400px;width:400px;transform: rotate(270deg)}
           100%{height:500px;width:500px;transform: rotate(360deg)}
        }

    </style>
</head>
<body>
<div id="head">
    <img src="随机抽取/叶帅.jpg" height="288" width="216"/>


    <img src="随机抽取/周琪.jpg" height="288" width="216"/>

    <img src="随机抽取/花伟成.jpg" height="288" width="216"/>


    <img src="随机抽取/窦浩然.jpg" height="144" width="99"/>

    <img src="随机抽取/路峰高.jpg" height="288" width="216"/>
</div>


</body>
</html>